<template>
   <div class="phone-swiper">
       <van-swipe @change="onChange" autoplay="2000" >
      <van-swipe-item v-for="(v,index) in  buyphonelist" :key="index" class="phone">
        <img :src="v.src" alt="">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/8</div>
      </template>
    </van-swipe>
   </div>
</template>

<script>
export default {
    data() {
    return {
      current: 0,
      buyphonelist:[]
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
  created(){
    this.$http({
        url:"http://localhost:3000/phoneswiper",
        method:"get"
    }).then((res)=>{
        this. buyphonelist=res.data;
        // console.log(this.list);
    })
  }
}
</script>

<style scoped>
   .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: .625rem;
    color: white;
    width: 2rem;
    height: 1rem;
    text-align: center;
    line-height: .8rem;
  }
  img{
    width: 18.75rem;
    height: 19.75rem;
  }
  .phone{
    text-align: center;
  }
  .phone-swiper{
    height: 3rem;
  }
</style>